<template>
	<view class="titlesbgbg">
		<view class="cttit">
			<text>意见反馈</text>
			<view class=""></view>
		</view>
		<text class="fk" @click="gofankuilist" v-if="!info">反馈记录</text>
	</view>

	<picker mode="selector" :disabled="info?true:false" :range="myTypeList" range-key="name" @change="typeChange">
		<view class="subtype">
			<view class="name">类型</view>
			<view class="ipt">{{fishId?getfinshname(fishId):'请选择'}}</view>
			<image src="@/static/sjx.png" mode="" class="img"></image>
		</view>
	</picker>
	<view class="wtms">
		<text class="titles">问题描述</text>
		<textarea :disabled="info?true:false" v-model="contentbox" maxlength="200" auto-height
			placeholder="请描述您的问题，以便我们做出改进"></textarea>
		<view class="txt">{{contentbox.length}}/200</view>
	</view>

	<view class="wtms">
		<text class="titles">上传凭证（相关问题截图）</text>

		<view class="imgsbg" v-if="info">
			<view class="imgitem" v-for="(item,index) in imgList" :key="index">
				<image :src="item" mode="" class="igitem"></image>
			</view>

		</view>
		<view class="imgsbg" v-else>
			<view class="imgitem" v-for="(item,index) in imgList" :key="index">
				<image :src="item" mode="" class="igitem"></image>
				<view class="del" @click="delimg(index)">
					<image src="@/static/x.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="imgitem imgitem2" @click="chooseimg" v-if="imgList.length<3">
				<image src="@/static/zxj.png" mode=""></image>
				<text>上传凭证</text>
				<text>(最多3张)</text>
			</view>
		</view>


	</view>
	<view class="wtms">
		<text class="titles">联系电话</text>
		<input v-model="tel" :disabled="info?true:false" type="number" maxlength="11" placeholder="选填，我们将更有针对性的即使回访" />
	</view>
	<view class="searchbtn" @click="submit" v-if="!info">提交</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	let imgList = ref([])

	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		typeList
	} from "@/api/ancestra.js"
	import {
		feedback
	} from "@/api/index.js"

	function gofankuilist() {
		uni.navigateTo({
			url: "/pages/mine/fankui/list"
		})
	}

	let info = ref(null)
	onLoad((e) => {
		if (e.info) {
			info.value = JSON.parse(e.info)
			contentbox.value = info.value.details
			imgList.value = info.value.imgs.split(',')
			tel.value = info.value.tel
			fishId.value = info.value.typeId
		}
	})

	function chooseimg() {
		uni.chooseImage({
			count: 3 - imgList.length,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;


				tempFilePaths.forEach(item => {
					uploadImage(item, (res) => {
						if (res.url) {
							imgList.value = imgList.value.concat(res.url)
						}
					})
				});
			}
		});
	}
	let tel = ref('')

	import {
		uploadImage
	} from '@/utils/upload';
	let userInfo = ref('')
	let myTypeList = ref([])
	let fishId = ref(null)

	function typeChange(e) {
		fishId.value = myTypeList.value[e.detail.value].id
	}
	let contentbox = ref('')

	function getfinshname(e) {
		let name = ''
		myTypeList.value.forEach((item) => {
			if (item.id == e) {
				name = item.name
			}
		})
		return name
	}


	function delimg(index) {
		imgList.value.splice(index, 1)
	}

	function submit() {
		if (!fishId.value) {
			uni.showToast({
				title: "请选择类型",
				icon: "none"
			})
			return
		}
		if (!contentbox.value) {
			uni.showToast({
				title: "请填写描述",
				icon: "none"
			})
			return
		}

		let data = {
			details: contentbox.value,
			imgs: imgList.value.join(),
			typeId: fishId.value,
			tel: tel.value,
		}
		uni.showLoading({
			mask: true
		})
		feedback(data).then(res => {
			uni.hideLoading()
			uni.showModal({
				title: "反馈成功",
				showCancel: false,
				success: (e) => {
					uni.navigateBack()
				}
			})
		})

	}
	onMounted(() => {
		typeList({
			type: 0
		}).then(res => {
			myTypeList.value = res.data
		})
	})
</script>

<style>
	page {
		background: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.searchbtn {



		position: fixed;
		bottom: 100rpx;
		left: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #C7A46F;
		color: #ffffff;

		width: 670rpx;
		height: 88rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;

	}

	.imgsbg {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding-bottom: 0rpx;

		.imgitem {
			width: 160rpx;
			height: 160rpx;
			background: #F8F8F8;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: center;
			margin-right: 14rpx;
			margin-top: 30rpx;
			border: 1rpx dashed #ffffff;
			border-color: none;

			.igitem {
				width: 100%;
				height: 100%;
			}

			.add {
				width: 68rpx;
				height: 68rpx;
			}

			.del {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 48rpx;
				height: 48rpx;
				background: #FF4747;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;

				image {
					width: 24rpx;
					height: 24rpx;

				}
			}
		}

		.imgitem:nth-of-type(4n) {
			margin-right: 0;
		}

		.imgitem2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 1rpx dashed #CCCCCC;

			image {
				width: 42rpx;
				height: 40rpx;
			}

			text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
			}
		}

	}

	.wtms {
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		margin-top: 16rpx;
		box-sizing: border-box;
		padding: 30rpx 38rpx;

		.titles {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}

		textarea {
			width: 100%;
			margin-top: 16rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
		}

		input {
			width: 100%;
			margin-top: 16rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
		}

		.txt {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #AAAAAA;
			width: 100%;
			text-align: right;
		}
	}

	.subtype {

		// margin-top: 30rpx;
		box-sizing: border-box;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 116rpx;
		width: 750rpx;
		background: #ffffff;


		.name {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			display: block;
			width: 180rpx;
		}

		.subtyperight {
			border-bottom: 1rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			height: 100rpx;
		}

		.ipt {
			width: 474rpx;
			min-height: 60rpx;
			display: flex;
			font-size: 30rpx;
			align-items: center;


		}

		.img {
			margin-left: 20rpx;
			width: 17rpx;
			height: 15rpx;
		}
	}

	.titlesbgbg {
		height: 106rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx;
	}

	.fk {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #C7A46F;
	}

	.cttit {

		position: relative;
		display: flex;
		flex-direction: column;

		&>text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			line-height: 24rpx;
			position: relative;
			z-index: 10;
		}

		view {
			width: 130rpx;
			height: 16rpx;
			border-radius: 20rpx;
			background: #C7A46F;
			position: absolute;
			bottom: -6rpx;
		}
	}
</style>